<template>
 <div>
   <div class="top">
     <img src="@/assets/mine.png" alt="">
   </div>
    <van-collapse class="codemodule" v-model="activeCode">
    <!-- <van-collapse-item name="2">
      <template #title>
      <div><van-icon name="card" size="34px" color="#e8453a" /><span>电子健康通行码</span></div>
      </template>
    </van-collapse-item> -->
     <van-collapse-item name="2" icon="card">
        <template #title>
      <div style="padding-left:20px">电子健康通行码</div>
      </template>
     </van-collapse-item>
    </van-collapse>
    <div class="itemList" align="center">
      <van-row type="flex" justify="space-around">
        <van-col span="8" v-for="(item,key) in typeList" :key="key" class="item">
        <van-image class="itemImg" :src="item.image" round width="3rem" height="3rem"/>
        <div class="title">{{item.title}}</div>
        </van-col>
    </van-row>
    </div>
    </div>
</template>

<script>

export default {
  name: 'Mine',
  data () {
    return {
      typeList: [
        {
          title: '信用积分',
          image: require('@/assets/mine/1-jf.png')
        },
        {
          title: '我的情报',
          image: require('@/assets/mine/2-wdqb.png')
        },
        {
          title: '我的收藏',
          image: require('@/assets/mine/3-wdsc.png')
        },
        {
          title: '我的订阅',
          image: require('@/assets/mine/4-wddy.png')
        },
        {
          title: '意见反馈',
          image: require('@/assets/mine/5-yjfk.png')
        },
        {
          title: '关于寿光云',
          image: require('@/assets/mine/6-sgy.png')
        },
        {
          title: '设置',
          image: require('@/assets/mine/7-shezhi.png')
        },
        {
          title: '我要答题',
          image: require('@/assets/mine/8-dati.png')
        },
        {
          title: '我要预约',
          image: require('@/assets/mine/9-yuyue.png')
        },
        {
          title: '我要挂号',
          image: require('@/assets/mine/10-guahao.png')
        },
        {
          title: '我要投票',
          image: require('@/assets/mine/11-toupiao.png')
        },
        {
          title: '便民服务',
          image: require('@/assets/mine/12-pianmin.png')
        }
      ],
      activeCode: ['1']
    }
  }
}
</script>

<style lang="scss" scoped>
.top img {
  width: 100%;
  margin: 0 auto;
}
.codemodule {
  width: 350px;
  margin: 20px auto;
  margin-top: 0;
}
.item {
  padding-top: 20px;
}
.title {
  font-size: 13.5px;
  padding-top: 6px;
  text-align: center;
}
.itemList {
  padding-bottom: 60px;
}
</style>
